<template>
    <div class="product-add">
        <a-modal width="90%" :visible="visible" :title="modalOption.title" @ok="modalOption.onOk" :dialog-style="{ top: '20px' }"
            @cancel="modalOption.onCancel" :okText="modalOption.okText" :cancelText="modalOption.cancelText"
            class="yuan-modal product-add-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="产品类型" prop="productType">
                                <a-radio-group disabled v-if="visible" @change="radioChange" :default-value="productType">
                                    <a-radio value="中药饮片(半成品)">中药饮片(半成品)</a-radio>
                                    <a-radio value="直服饮片(半成品)">直服饮片(半成品)</a-radio>
                                    <a-radio value="单方饮片(半成品)">单方饮片(半成品)</a-radio>
                                </a-radio-group>
                            </a-form-model-item>
                            <!-- <a-form-model-item v-if="formData.productType == '中药饮片(半成品)'" class="yuan-form-item" label="中药等级" prop="medicineClass">
                               <a-select @change="classChange" class="yuan-form-input" v-model="formData.medicineClass">
                                   <a-select-option value="统货">统货</a-select-option>
                                   <a-select-option value="选货">选货</a-select-option>
                               </a-select>
                            </a-form-model-item>  -->
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item yuan-form-row-item" label="名称" prop="materialCode">
                                <!-- <a-select class="yuan-form-input" v-model="formData.materialCode" placeholder="请选择"
                                    @change="materialChange">
                                    <a-select-option :value="item.materialCode"
                                        v-for="item in materialList">{{item.varietyName}}</a-select-option>
                                </a-select> -->

                               <div>
                                   <YuanSelectVue  showSearch class="yuan-form-input" placeholder="请选择" :list="materialList"
                                                  v-model="formData.materialCode" @change="materialChange" @search="searchMaterial" val="materialCode" name='varietyName'
                                                  :defName="formData.varietyName" />

                                   <a-button class="primary-empty-btn yuan-form-item-btn" @click="jump('/xls/#/materialMgt')">
                                       档案管理
                                   </a-button>
                               </div>
                            </a-form-model-item>

                            <a-form-model-item class="yuan-form-item" label="物料代码" prop="materialCode">
                                <span class="yuan-form-show" v-if="formData.materialCode">{{formData.materialCode}}</span>
                                <span class="yuan-form-placeholder" v-else>请先选择名称</span>
                            </a-form-model-item>
                            <div class="clear-both"></div>

                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item" label="产地" prop="placeOfOrigin">
                                <span class="yuan-form-show" v-if="formData.placeOfOrigin">{{formData.placeOfOrigin}}</span>
                                <span class="yuan-form-placeholder" v-else>请先选择原料</span>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item" label="生产日期" prop="productionTime">
                                <a-date-picker class="yuan-form-input" valueFormat="YYYY-MM-DD" v-model="formData.productionTime"
                                    placeholder="选择日期" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item yuan-form-row-item" label="生产负责人" prop="principalId">
                                <!-- <a-select class="yuan-form-input" v-model="formData.principalId" placeholder="请选择"
                                    @change="accountChange">
                                    <a-select-option :value="item.userId"
                                        v-for="item in accountList">{{item.name}}</a-select-option>
                                </a-select> -->
                                <YuanSelectVue show-search class="yuan-form-input" placeholder="请选择" :list="accountList"
                                    v-model="formData.principalId" @change="accountChange" val="userId" name='name'
                                    :defName="formData.principal" />
                                <a-button class="primary-empty-btn yuan-form-item-btn" @click="jump('/xls/#/memberManagement')">
                                    员工管理
                                </a-button>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item" label="生产批号" prop="productionBatch">
                                <a-input class="yuan-form-input" v-model="formData.productionBatch" placeholder="请输入生产批号" />
                            </a-form-model-item>

                            <a-form-model-item class="yuan-form-item yuan-form-row-item" label="生产工艺" prop="processIdCopy">
                                <template v-if="formData.materialCode">
                                    <a-select  class="yuan-form-input" v-model="formData.processId" placeholder="请选择"
                                    @change="processChange">
                                    <a-select-option :value="item.id"
                                        v-for="item in processList" :key="item.id">{{item.craftName}}</a-select-option>
                                    </a-select>
                                    <a-button class="primary-empty-btn yuan-form-item-btn" @click="jump('/xls/#/workProcessMgt')">
                                        生产工艺
                                    </a-button>
                                </template>
                                <span v-else>请选择名称</span>
                            </a-form-model-item>
                            <div class="clear-both"></div>

                            <a-form-model-item class="yuan-form-item" label="实际产量" prop="practicalYield">
                                <a-input class="yuan-form-input" type="number" v-model="formData.practicalYield"
                                    placeholder="请输入" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="产量单位" prop="unit">
                                <!-- <a-select class="yuan-form-input" v-model="formData.unit" placeholder="请选择">
                                    <a-select-option :value="item.unit" v-for="item in unitList"
                                        :key="item.id">{{item.unit}}</a-select-option>
                                </a-select> -->
                                <YuanSelectVue class="yuan-form-input" placeholder="请选择" :list="unitList" v-model="formData.unit"
                                    val="unit" name='unit' :defName="formData.unit" />

                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item yuan-form-row-item" label="仓库" prop="warehouseId">
                                <!-- <a-select class="yuan-form-input" v-model="formData.warehouseId" placeholder="请选择"
                                    @change="warehouseChange">
                                    <a-select-option :value="item.id"
                                        v-for="item in warehouseList">{{item.name}}</a-select-option>
                                </a-select> -->
                                <YuanSelectVue style="width: 200px" class="yuan-form-input" placeholder="请选择" :list="warehouseList"
                                    v-model="formData.warehouseId" @change="warehouseChange" val="id" name='name'
                                    :defName="formData.warehouse" />

                                <a-button class="primary-empty-btn yuan-form-item-btn" @click="jump('/xls/#/warehouseMgt')">
                                    仓库管理
                                </a-button>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item label="产品图片" class="yuan-form-item" v-if="pageReady">
                                <Upload :uploadLength="1" @uploadChange="uploadChange1"
                                    :defImgList="formData.productPicture?[formData.productPicture]:[]" />
                                <div class="upload-tips">jpg.png.gif格式.不超过2MB</div>
                            </a-form-model-item>
                            <a-form-model-item label="生产场景" class="yuan-form-item" v-if="pageReady">
                                <Upload :uploadLength="1" @uploadChange="uploadChange2"
                                    :defImgList="formData.productionScene?[formData.productionScene]:[]" />
                                <div class="upload-tips">jpg.png.gif格式.不超过2MB</div>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item label="质量标准" prop="number">
                                <a-input type="textarea" style="width: 500px;" :rows="5" v-model="formData.massStandard"
                                    placeholder="请输入产品类型" :maxLength="200" />
                                <div class="textarea-number">{{ formData.massStandard ? formData.massStandard.length : 0 }}/200
                                </div>
                            </a-form-model-item>
                        </div>
                    </div>

                    <div class="form-panel">
                        <div class="form-panel-title"></div>
                        <div class="form-panel-box">
                            <div class="process-box" v-if="formData.processStep && formData.processStep.length>0">
                                <template v-for="(item, idx) in formData.processStep">
                                    <i class="iconfont process-next" v-if="idx !== 0" :key="idx">&#xeb08;</i>
                                    <div class="process-list" :key="idx">
                                        <a-icon class="process-del c-danger" type="close" @click="removeProcess(idx)"
                                            v-if="formData.processStep.length>1" />
                                        <div class="list-title">工序{{ idx + 1 }}</div>
                                        <a-form-model-item style="width: 100%;" label="工艺名称：">
                                            <a-input v-model="formData.processStep[idx].processName" placeholder="请输入工艺名称" />
                                        </a-form-model-item>
                                        <a-form-model-item label="工艺图片：" v-if="pageReady">
                                            <Upload :uploadLength="1" @uploadChange="(e)=>uploadChangeProcess(e,idx)"
                                                :defImgList="item.processPicture ? [item.processPicture] : []"
                                                :key="'process_upload_'+idx" />
                                        </a-form-model-item>

                                    </div>

                                </template>
                                <a-button class="process-add" type="primary" @click="addProcess">
                                    新增工序
                                </a-button>
                            </div>
                            <div v-else>
                                请先选择生产工艺
                            </div>
                        </div>
                    </div>
                    <div class="form-panel">
                        <div class="form-panel-title">原料信息</div>
                        <div class="form-panel-box">
                            <div class="yuan-table">
                                <div class="table-row header-row">
                                    <div class="table-col col-1"></div>
                                    <div class="table-col">名称</div>
                                    <div class="table-col">进厂编号</div>
                                    <div class="table-col">可用量</div>
                                    <div class="table-col mast-ico">投入量</div>
                                    <div class="table-col">质量标准</div>
                                </div>
                                <div class="table-row">
                                    <div class="table-col col-1 mast-ico text-right">原料：</div>
                                    <div class="table-col">
                                        <!-- <a-select v-model="rawObj.enterStorageId" placeholder="请选择"
                                            @change="materialListRawChange">
                                            <a-select-option :value="item.id"
                                                v-for="item in materialListRaw">{{item.varietyName}}</a-select-option>
                                        </a-select> -->

                                        <YuanSelectVue placeholder="请选择" :list="materialListRaw"
                                            v-model="rawObj.enterStorageId" @change="materialListRawChange" val="id" :showSearch="true"
                                            name='varietyName' name2="enterStorageBatch" :defName="rawObj.varietyName" />
                                    </div>
                                    <div class="table-col">
                                        <a-input v-model="rawObj.enterStorageBatch" placeholder="请输入进厂编号" disabled />
                                    </div>
                                    <div class="table-col">
                                        <span>{{realTimeNum}}</span>
                                    </div>
                                    <div class="table-col">
                                        <a-input :suffix="rawObj.unit" type="number" v-model="rawObj.putIntoNumber"
                                            placeholder="请输入投入量" />
                                    </div>
                                    <div class="table-col">
                                        <a-input v-model="rawObj.massStandard" placeholder="请输入质量标准" disabled />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-panel">
                        <div class="form-panel-title">辅料信息</div>
                        <div class="form-panel-box">
                            <div class="yuan-table">
                                <div class="table-row header-row">
                                    <div class="table-col col-1"></div>
                                    <div class="table-col">名称</div>
                                    <!-- <div class="table-col">进厂编号</div> -->
                                    <!-- <div class="table-col">投入量</div> -->
                                    <div class="table-col col-grow"></div>
                                </div>
                                <div class="table-row" v-for="(item, index) in accList" :key="index">
                                    <div class="table-col col-1 text-right">辅料{{ index + 1 }}：</div>
                                    <div class="table-col">
                                        <!-- <a-select v-model="accList[index].enterStorageId" placeholder="请选择"
                                            @change="materialListAccChange(index)">
                                            <a-select-option :value="item.id"
                                                v-for="item in materialListAcc">{{item.varietyName}}</a-select-option>
                                        </a-select> -->

                                        <YuanSelectVue placeholder="请选择" :list="materialListAcc"
                                            v-model="accList[index].enterStorageId" @change="materialListAccChange(index)" :showSearch="true"
                                            val="id" name='varietyName' name2="enterStorageBatch" :defName="accList[index].varietyName" />
                                    </div>
                                    <!-- <div class="table-col">
                                        <a-input v-model="accList[index].enterStorageBatch" placeholder="请输入进厂编号" disabled />
                                    </div>
                                    <div class="table-col">
                                        <a-input :suffix="item.unit" type="number" v-model="accList[index].putIntoNumber"
                                            placeholder="请输入投入量" />
                                    </div> -->

                                    <div class="table-col col-grow">
                                        <a-button class="raw-delete" type="danger" @click="deleteAcc(index)"
                                            v-if="accList.length > 1">
                                            删除
                                        </a-button>
                                    </div>
                                </div>
                            </div>
                            <a-button class="raw-add" type="primary" @click="addAcc">
                                添加一条
                            </a-button>
                        </div>
                    </div>

                </a-form-model>
            </a-spin>

        </a-modal>
        <ProductDetail :visible="detailProductVisible" @closeModal="() => detailProductVisible = false" :isPreview="true"
            :previewData="formData" @submit="submit" />
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import nextApi, {
    AccountListRes,
    AddMaterListRes,
    MaterialListRes,
    ProcessListRes,
    ProListRes,
    WarehouseListRes,
} from "@/api/nextApi";
import Upload from "@/components/upload.vue";
import ProductDetail from "./productDetail.vue";
@Component({
    name: "ProductAdd",
    components: { Upload, ProductDetail },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) editId!: string;
    @Prop({default:'中药饮片(半成品)'}) productType!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) this.getDetail();
    }
    detailProductVisible = false;
    rawObj: any = {};
    accList: any[] = [{}];
    formLoading = false;
    modalOption = {
        title: "新增生产",
        okText: "预览并提交",
        cancelText: "取消",
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    rules = {
        productType: [{ required: true, message: "请输入产品类型", trigger: "blur" }],
        materialCode: [{ required: true, message: "请选择名称", trigger: "blur" }],
        productionTime: [{ required: true, message: "请选择生产日期", trigger: "change" }],
        principalId: [{ required: true, message: "请选择生产负责人", trigger: "blur" }],
        productionBatch: [{ required: true, message: "请输入生产批号", trigger: "blur" }],
        processId: [{ required: true, message: "请选择生产工艺", trigger: "blur" }],
        practicalYield: [{ required: true, message: "请输入实际产量", trigger: "blur" }],
        warehouseId: [{ required: true, message: "请选择仓库", trigger: "blur" }],
        unit: [{ required: true, message: "请选择产量单位", trigger: "blur" }],
    };
    pageReady = false;
    formData: any = { processStep: [] };
    resetForm() {
        this.formData = {
            processStep: [],
        };
        this.accList = [{}];
        this.rawObj = {};
        this.formData.principalId = this.accountList[0].userId
        this.formData.principal = this.accountList[0].name
        this.formData.unit = "kg"
    }
    radioChange({target}){
        this.formData.productType = target.value
        console.log(this.formData.productType);

        // if(this.formData.productType != '中药饮片(半成品)'){
        //     this.formData.medicineClass = ''
        // }
        this.getMaterials()
    }
    searchMaterial(e:string){
        this.getMaterials(e)
    }
    // classChange(){
    //     this.getMaterials()
    // }
    async getDetail() {
        this.formLoading = true;
        try {
            Promise.all([
                this.getAddMaterList(),
                this.getAccountList(),
                this.getWarehouseList(),
                this.getUnitList(),
            ]).then(async () => {
                if (this.editId) {
                    const res = await nextApi.getProDetial({ id: this.editId });

                    const materialListRaw = res.data.materialsList.filter((item) => item.type === "中药材");
                    const rawOne = materialListRaw[0] || {};
                    this.rawObj = {
                        enterStorageId: rawOne.inventoryId,
                        varietyName: rawOne.varietyName,
                        enterStorageBatch: rawOne.enterThePlantNumber,
                        unit: rawOne.unit,
                        massStandard: rawOne.massStandard,
                        rawType: rawOne.type,
                        putIntoNumber: rawOne.input || "",
                    };

                    const materialListAcc = res.data.materialsList.filter((item) => item.type === "辅料");
                    this.accList = materialListAcc.map((item) => {
                        return {
                            enterStorageId: item.inventoryId,
                            varietyName: item.varietyName,
                            enterStorageBatch: item.enterThePlantNumber,
                            unit: item.unit,
                            massStandard: item.massStandard,
                            rawType: item.type,
                            putIntoNumber: item.input || "",
                        };
                    });
                    if (!this.accList) this.accList = [{}];
                    this.formData = { ...res.data };
                    this.materialChange()

                } else {
                    this.resetForm();
                }
                this.formData.productType = this.productType;
                // if(this.formData.productType != "中药饮片(半成品)") await this.getMaterials()
                await this.getMaterials()
                this.pageReady = true;
                this.formLoading = false;
                console.log(this.formData)

            });
        } finally {
        }
    }
    async mounted() {
        //this.resetForm()
    }
    closeModal() {
        this.pageReady = false;
        this.resetForm();
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }
    modalOk() {
        if (!this.rawObj.enterStorageId) {
            this.$message.error("请选择原料");
            return;
        }
        if (!this.rawObj.putIntoNumber) {
            this.$message.error("请输入原料投入量");
            return;
        }
        // let accType = true;
        // this.accList.forEach((item) => {
        //     if (item.enterStorageId && !item.putIntoNumber) accType = false;
        // });
        // if (!accType) {
        //     this.$message.error("请输入辅料投入量");
        //     return;
        // }

        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                let yfInfo: any = [];
                yfInfo = [...this.accList];
                yfInfo.push(this.rawObj);
                this.formData.yfInfo = yfInfo;
                console.info(this.formData);
                this.detailProductVisible = true;
            }
        });
    }
    uploadChange1(e: { url: string }[]) {
        const urlArr = e.map((item) => item.url);
        this.formData.productPicture = urlArr[0] || "";
    }
    uploadChange2(e: { url: string }[]) {
        const urlArr = e.map((item) => item.url);
        this.formData.productionScene = urlArr[0] || "";
    }
    addAcc() {
        this.accList.push({ name: "", number: "", weight: "", content: "" });
    }
    deleteAcc(idx: number) {
        this.accList.splice(idx, 1);
    }
    realTimeNum = 0
    async getRealTimeNum(id){
        const res = await nextApi.getAvailableMaterList({id})
        this.realTimeNum = res.data
    }
    materialList: MaterialListRes[] = [];
    async getMaterials(e?:string) {
        // if (this.materialList && this.materialList.length > 0) return;
        const res = await nextApi.getMaterialList({
            productType: this.productType,
            medicineClass:this.formData.medicineClass,
            state: 0,
            pageNum:1,
            pageSize:500,
            varietyName:e,
        });
        this.materialList = res.data?.rows || [];
    }
    materialListRaw: AddMaterListRes[] = [];
    materialListAcc: AddMaterListRes[] = [];
    async getAddMaterList() {
        const res = await nextApi.getAddMaterList("");
        this.materialListRaw = res.data?.filter((item) => item.rawType === "中药材");
        this.materialListAcc = res.data?.filter((item) => item.rawType === "辅料");
    }
    materialChange() {
        const find = this.materialList.find((item) => item.materialCode === this.formData.materialCode);
        if (find) {
            this.formData.varietyName = find.varietyName;
            this.formData.materialCode = find.materialCode;
            this.formData.varietyAddTime = find.varietyAddTime;
            this.formData.medicineClass = find.medicineClass;
            // this.formData.medicineValue = find.medicineValue;
            // this.formData.discretion = find.loadingQuantity;
            // this.formData.inventoryCode = find.inventoryCode;
            // this.formData.expirationDate = find.expirationDate;
            this.formData.productBigKind = find.productBigKind;
            // this.formData.colorChart = find.colorChart;
        }
        this.getProcessList()

    }
    materialListRawChange() {
        const find = this.materialListRaw.find((item) => item.id === this.rawObj.enterStorageId);
        if (find) {
            this.rawObj = {
                enterStorageId: find.id,
                varietyName: find.varietyName,
                enterStorageBatch: find.enterStorageBatch,
                unit: find.unit,
                massStandard: find.massStandard,
                rawType: find.rawType,
            };
            this.formData.placeOfOrigin = find.placeOfOrigin;
            this.getRealTimeNum(find.id)
        }
    }
    materialListAccChange(idx: number) {
        const find = this.materialListAcc.find((item) => item.id === this.accList[idx].enterStorageId);
        if (find) {
            this.$set(this.accList, idx, {
                enterStorageId: find.id,
                varietyName: find.varietyName,
                enterStorageBatch: find.enterStorageBatch,
                unit: find.unit,
                massStandard: find.massStandard,
                rawType: find.rawType,
            });
        }
    }
    accountList: AccountListRes[] = [];
    async getAccountList() {
        if (this.accountList && this.accountList.length > 0) return;
        const res = await nextApi.getAccountList({});
        this.accountList = res.data?.rows || [];
        let curAccount;
        const siteUserInfo = localStorage.getItem('siteUserInfo') ?? '';
        if(siteUserInfo){
            try{
                curAccount = JSON.parse(siteUserInfo)
                let curUserInfo: AccountListRes = {
                    name:curAccount.name,
                    userId:curAccount.id,
                    phone:curAccount.phone,
                    organizationName:curAccount.organizationName
                }
                this.accountList.unshift(curUserInfo)
            }catch (error) {
                console.error('Failed to parse siteUserInfo:', error);
                curAccount = null
            }
        }else{
            curAccount = null
        }
    }
    accountChange() {
        const find = this.accountList.find((item) => item.userId === this.formData.principalId);
        if (find) {
            this.formData.principal = find.name;
        }
    }
    processList: ProcessListRes[] = [];
    async getProcessList(e?:string) {
        // if (this.processList && this.processList.length > 0) return;
        const res = await nextApi.getProcessList({
            state: 0,
            productType:this.productType,
            varietyName: this.materialList.find(item=>this.formData.materialCode == item.materialCode)?.varietyName,
            pageNum:1,
            pageSize:10000,
        });
        this.processList = res.data?.rows || [];
    }
    processChange() {
        const find = this.processList.find((item) => item.id === this.formData.processId);
        if (find) {
            const step = JSON.parse(find.processStep || "{}");
            this.formData.processStep = step;
        }
    }
    warehouseList: WarehouseListRes[] = [];
    async getWarehouseList() {
        if (this.warehouseList && this.warehouseList.length > 0) return;
        const res = await nextApi.getWarehouseList({
            state: 1,
        });
        this.warehouseList = res.data || [];
    }
    warehouseChange() {
        const find = this.warehouseList.find((item) => item.id === this.formData.warehouseId);
        if (find) {
            this.formData.warehouse = find.name;
        }
    }

    unitList: { unit: string }[] = [];
    async getUnitList() {
        if (this.unitList && this.unitList.length > 0) return;
        const res = await nextApi.getUnitList();
        this.unitList = res.data || [];
    }
    uploadChangeProcess(e: { url: string }[], idx: number) {
        this.formData.processStep[idx].processPicture = e[0] ? e[0].url : "";
    }
    removeProcess(idx: number) {
        this.formData.processStep.splice(idx, 1);
    }
    addProcess() {
        this.formData.processStep.push({ processName: "", processPicture: "" });
    }
    async submit() {
        this.detailProductVisible = false;
        this.formLoading = true;
        try {
            if (this.editId) this.formData.id = this.editId;
            delete this.formData.materialList;
            const res = await nextApi.addPro(this.formData);
            this.$message.success(res.msg);
            this.closeModal();
            this.$emit("resetList");
        } finally {
            this.formLoading = false;
        }
    }
    jump(url: string) {
        window.open(url);
    }
}
</script>
<style lang="scss">
.product-add-modal {
    .process-box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 10px;
        .ant-upload-picture-card-wrapper {
            width: 150px;
            height: 150px;
        }
        .ant-upload-list-picture-card-container {
            width: 150px;
            height: 150px;
        }
        .ant-upload-list-picture-card .ant-upload-list-item {
            width: 150px;
            height: 150px;
        }

        .ant-upload.ant-upload-select-picture-card {
            width: 150px;
            height: 150px;
        }

        .ant-input {
            width: 150px;
        }
    }

    .process-list {
        border: solid 1px #eee;
        padding: 10px 0;
        width: 310px;
        margin-bottom: 10px;
        position: relative;
    }

    .list-title {
        font-size: 16px;
        color: #111;
        padding-left: 30px;
    }

    .process-next {
        font-size: 28px;
        font-weight: bold;
        padding: 0 10px;
    }

    .process-add {
        margin-left: 20px;
    }

    .upload-tips {
        font-size: 12px;
        line-height: 20px;
        padding-bottom: 5px;
        color: #05b089;
    }

    .textarea-number {
        position: absolute;
        right: 10px;
        bottom: 2px;
        line-height: 20px;
        font-size: 12px;
    }
    .process-del {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .raw-add {
        margin-left: 100px;
    }
}
</style>
